<template>
  <el-row :gutter="15">
    <el-col :span="19">
      <!--1.账户信息-->
      <wallet-info
               shadow="never"
               v-show="showStatus[0]"
               @handleSelect="handleSelect">
      </wallet-info>
      <!--2.账户充值-->
      <account-recharge
               shadow="never"
               v-show="showStatus[1]">
      </account-recharge>
      <!--3.充值记录-->
      <recharge-record
               shadow="never"
               v-show="showStatus[2]">
      </recharge-record>
    </el-col>
    <el-col :span="5">
      <el-card class="box-card"  shadow="never">
        <div class="head-container">
          <div style="margin-left: 5px">
            <el-row>
              <svg t="1710426932426" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                   p-id="2566" width="40" height="40" style="margin-top: 5px"><path d="M253.155556 533.807407C264.533333 687.407407 398.222222 803.081481 551.822222 791.703704l-40.77037-555.614815c-153.6 11.377778-268.325926 145.066667-257.896296 297.718518z" fill="#FFCA00" p-id="2567"></path><path d="M511.051852 236.088889l40.77037 555.614815C705.422222 780.325926 821.096296 646.637037 809.718519 493.037037c-11.377778-152.651852-145.066667-268.325926-298.666667-256.948148z" fill="#FF8D23" p-id="2568"></path><path d="M300.562963 530.962963c9.481481 128 120.414815 223.762963 248.414815 214.281481l-34.133334-462.696296c-128 9.481481-223.762963 120.414815-214.281481 248.414815z" fill="#FF8D23" p-id="2569"></path><path d="M514.844444 282.548148l34.133334 462.696296c128-9.481481 223.762963-120.414815 214.281481-248.414814-10.42963-128-121.362963-223.762963-248.414815-214.281482z" fill="#E87420" p-id="2570"></path><path d="M435.2 455.111111c-3.792593-53.096296 27.496296-72.059259 68.266667-76.8l-1.896297-31.288889 35.081482-2.844444 1.896296 32.237037c26.548148-0.948148 46.459259 1.896296 65.422222 6.637037l3.792593 47.407407c-22.755556 0-62.577778 0.948148-80.592593 1.896297-21.807407 0.948148-32.237037 3.792593-30.34074 24.651851l0.948148 9.481482c0.948148 16.118519 8.533333 21.807407 27.496296 20.859259l29.392593-1.896296c54.992593-3.792593 69.214815 39.822222 72.059259 70.162963l0.948148 15.17037c4.740741 62.577778-31.288889 79.644444-68.266667 82.488889l1.896297 30.340741-35.081482 2.844444-1.896296-30.34074c-30.340741 0.948148-40.77037-0.948148-65.422222-6.637038l-3.792593-46.459259c15.17037 0 51.2 0 85.333333-2.844444 16.118519-0.948148 27.496296-5.688889 26.548149-21.807408l-0.948149-10.429629c-0.948148-13.274074-5.688889-20.859259-23.703703-19.911111l-28.444445 1.896296c-66.37037 4.740741-74.903704-49.303704-76.8-69.214815l-1.896296-25.6z" fill="#FFCA00" p-id="2571"></path></svg>
              账户信息
            </el-row>
          </div>
        </div>
        <!-- 通过select事件处理菜单项选择 -->
        <el-menu
            default-active="1"
            class="el-menu-vertical-demo"
            @select="handleSelect"
            style="width: 250px;margin-left: -20px;margin-top: 10px">
          <el-menu-item index="1">
            <el-icon><Postcard /></el-icon>
            <span>我的账户</span>
          </el-menu-item>
          <el-menu-item index="2">
            <el-icon><Money /></el-icon>
            <span>账户充值</span>
          </el-menu-item>
          <el-menu-item index="3">
            <el-icon><Wallet /></el-icon>
            <span>充值记录</span>
          </el-menu-item>
        </el-menu>
      </el-card>
    </el-col>
  </el-row>

</template>
<script>
import WalletInfo from './components/WalletInfo.vue';
import AccountRecharge from './components/AccountRecharge.vue';
import RechargeRecord from './components/RechargeRecord.vue';

export default {
  name: 'AddDetail',
  components: {WalletInfo,AccountRecharge,RechargeRecord},
  props: {
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      active: 0,
      showStatus: [true, false, false],
      addInfo:{}
    }
  },
  methods: {
    hideAll() {
      for (let i = 0; i < this.showStatus.length; i++) {
        this.showStatus[i] = false;
      }
    },
    handleSelect(index) {
      this.hideAll();  // 隐藏所有子页面
      this.showStatus[index - 1] = true;  // 将所选子页面设置为显示状态
    },

  }
}
</script>
<style scoped lang="scss">
@import "@/theme/commonCard.css";

</style>